<template>
	<ln-modal width="1080px" title="配置" :mask-closable="false" :on-after-enter="onModalShow">
		<div class="normal-search">
			<n-form
				ref="formRef"
				inline
				label-placement="left"
				:model="searchForm"
				class="search-form"
			>
				<n-form-item label="名称" path="dictDetailName">
					<n-input
						v-model:value="searchForm.dictDetailName"
						clearable
						placeholder="请输入"
					/>
				</n-form-item>
				<n-form-item label="字典编号" path="dictDetailEnName">
					<n-input
						v-model:value="searchForm.dictDetailEnName"
						clearable
						placeholder="请输入"
					/>
				</n-form-item>
				<n-form-item>
					<n-button type="primary" @click="handleSearchClick">搜索</n-button>
				</n-form-item>
			</n-form>

			<div>
				<n-button type="primary" @click="handleAddClick">新增</n-button>
			</div>
		</div>

		<ln-data-table class="mytable" :columns="columns" :data="tableData" />
		<template #footer>
			<div style="margin-top: 20px">
				<n-button :loading="btnLoading" type="primary" @click="handleSaveClick"
					>保存</n-button
				>
				<n-button @click="() => handleCloseClick(false)">取消</n-button>
			</div>
		</template>
	</ln-modal>
</template>

<script lang="tsx" setup>
import { NSwitch } from 'naive-ui';
import type { DataTableColumns, DataTableColumn } from 'naive-ui';
import { useI18n } from 'vue-i18n';
import { getDicConfigList } from '@/api/system/dictionary';
import { addDicConfig } from '@/api/system/dictionary';
import type { DicConfigListRow } from '@/api/system/dictionary';
import { useMessage } from 'naive-ui';

import { LnButton } from '@/components/LnButton';
import CShowOrEdit from '@/components/CShowOrEdit';
import { ShowOrEditEnum } from '@/components/CShowOrEdit';

const { t } = useI18n();
const message = useMessage();
const props = defineProps({
	modalData: {
		type: Object,
		default: () => {},
	},
});
const emit = defineEmits(['close', 'update']);
// table
const actionColumn: DataTableColumn<DicConfigListRow> = {
	title: '操作',
	key: 'action',
	width: '100',
	render(row, index) {
		return (
			<div class="table-action">
				<LnButton onClick={() => handleUpdateClick(row)}>编辑</LnButton>
				<LnButton type="danger" onClick={() => handleDeleteClick(row, index)}>
					删除
				</LnButton>
			</div>
		);
	},
};
const columns: DataTableColumns<DicConfigListRow> = [
	{
		key: 'dictName',
		title: '名称',
		render(row) {
			return (
				<CShowOrEdit
					value={row.dictName}
					isEdit={row.edit}
					onUpdateValue={value => {
						row.dictName = value;
					}}
				/>
			);
			// return <CShowOrEdit v-model={row.dictName} isEdit={row.edit} />;
		},
	},
	{
		key: 'dictEnName',
		title: '英文名称',
		render(row) {
			return (
				<CShowOrEdit
					value={row.dictEnName}
					isEdit={row.edit}
					onUpdateValue={value => {
						row.dictEnName = value;
					}}
				/>
			);
		},
	},
	{
		key: 'dictData',
		title: '数据值',
		render(row) {
			return (
				<CShowOrEdit
					value={row.dictData}
					isEdit={row.edit}
					onUpdateValue={value => {
						row.dictData = value;
					}}
				/>
			);
		},
	},
	{
		key: 'idx',
		title: '排序',
		render(row) {
			return (
				<CShowOrEdit
					value={row.idx}
					isEdit={row.edit}
					onUpdateValue={value => {
						row.idx = value;
					}}
					type={ShowOrEditEnum.inputNumber}
				/>
			);
		},
	},
	{
		key: 'status',
		title: '状态',
		render(row) {
			return (
				<NSwitch
					value={row.status}
					onUpdateValue={v => {
						row.status = v;
					}}
					checked-value={true}
					unchecked-value={false}
				/>
			);
		},
	},
	actionColumn,
];
const tableData = ref<DicConfigListRow[]>([]);
// 搜索
const searchForm = ref({
	dictDetailName: '',
	dictDetailEnName: '',
});
function handleSearchClick() {
	onModalShow();
}

// 初始化
async function onModalShow() {
	const params = {
		dictTypeId: props.modalData.id,
		...unref(searchForm),
	};
	const { results } = await getDicConfigList(params);
	results.map(item => {
		item.edit = false;
	});
	tableData.value = results;
}

// 添加
function handleAddClick(params) {
	tableData.value.push({
		dictName: '',
		dictEnName: '',
		dictData: '',
		dictTypeId: props.modalData.id,
		idx: 1,
		status: true,
		edit: false,
	});
}
// 编辑
function handleUpdateClick(row: DicConfigListRow) {
	tableData.value.map(item => {
		item.edit = false;
	});
	row.edit = true;
}
// 删除
function handleDeleteClick(row, index) {
	tableData.value.splice(index, 1);
}

// 保存
const btnLoading = ref(false);
async function handleSaveClick() {
	try {
		btnLoading.value = true;
		await addDicConfig(unref(tableData), { dictTypeId: props.modalData.id });
		message.success(t('msg.operationCompleted'));
		handleCloseClick();
	} finally {
		btnLoading.value = false;
		// this.btnLoading = false;
	}
}
// 关闭
function handleCloseClick(data?: boolean) {
	emit('close', data);
}
</script>

<style lang="scss" scoped>
.check-item {
	width: 120px;
}

.mytable {
	height: 380px;
	max-height: 500px;
}
</style>
